<template>
  <div class="pro-form-modal">
    <CardItem tab-name="电池信息">
      <template #real>
        <div class="sever-info">
          <div>
            <span>电量服务</span
            ><span>{{
              realTimeData.electricityType
                ? realTimeData.electricityType == '1'
                  ? '市电供电'
                  : '电池供电'
                : '-'
            }}</span>
          </div>
          <div>
            <span>实时电压</span
            ><span>{{
              realTimeData.voltage
                ? Number(realTimeData.voltage) / 1000 + 'v'
                : '-'
            }}</span>
          </div>
        </div>
      </template>
      <template #history>
        <RangePickerCom
          v-model:timeValue="batteryTime"
          :searchApi="handleBattery"
        >
        </RangePickerCom>
        <div class="title" v-show="isshow">
          <span>市电供电</span>
          <span class="lastspan">电池供电</span>
        </div>
        <div id="battery" ref="batteryRef"></div>
      </template>
    </CardItem>
  </div>
</template>
<script setup lang="tsx">
import { ref } from 'vue';
import { Modal } from 'ant-design-vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill/src/liquidFill.js';
import 'echarts/theme/macarons';
import { getVoltageWaveform } from '@/api/device';
import CardItem from '../comm/CardItem.vue';
import RangePickerCom from './RangePickerCom.vue';

interface Props {
  pageData: any;
  realTimeData: any;
}
const props = defineProps<Props>();

const batteryTime = ref<any>([]);

// 查询电池监测
const handleBattery = async () => {
  const res: any = await getVoltageWaveform({
    code: props.pageData.code,
    startTime: batteryTime.value?.[0],
    endTime: batteryTime.value?.[1],
  });
  if (res.code == 200) {
    let yData: any = [];
    if (res.data.ydata) {
      res.data.ydata.forEach((item: number, index: number) => {
        yData.push({
          value: Number(item) / 1000,
          type: res.data.typeData[index],
        });
      });
      batteryInit(res.data, yData);
    } else {
      Modal.error({ content: '暂无数据' });
    }
  }
};

// 电量监测图表
const batteryRef = ref();
const isshow = ref<Boolean>(false);
const batteryInit = (data: any, ydata: any) => {
  batteryRef.value.style.height = '500px';
  const batteryChart = echarts.init(batteryRef.value);
  let option = {
    // title: {
    //   textStyle: {
    //     // color: '#fff',
    //     fontSize: '16px'
    //   },
    //   text:'市电供电：；电池供电',
    //   top: '5%',
    //   left: '4%',
    // },
    grid: [
      {
        top: '25%',
        bottom: '15%',
        right: '8%',
        left: '8%',
      },
    ],
    tooltip: {
      trigger: 'axis',
      formatter: function (param: any) {
        return `${param[0].name} </br> ${
          param[0].data.type == '1' ? '市电供电' : '电池供电'
        }:${param[0].data.value}`;
      },
    },
    xAxis: [
      {
        type: 'category',
        data: data.xdata,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          },
          formatter: function (value: any) {
            return value.split('.')[0];
            // const date = new Date(Number(value))
            // return `${date.getHours() <= 9 ? '0' + date.getHours() : date.getHours()}:${date.getMinutes() <= 9 ? '0' + date.getMinutes() : date.getMinutes()}:${date.getSeconds() <= 9 ? '0' + date.getSeconds() : date.getSeconds()}`
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .14)',
            type: 'dashed',
          },
        }, // 网格线
        axisLine: {
          onZero: false,
        },
        axisLabel: {
          // color: '#fff',
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          },
        },
        axisTick: {
          show: false,
        },
        scale: true,
      },
    ],
    series: [
      {
        name: '市电供电',
        type: 'line',
        // symbol: 'none',
        symbolSize: 5,
        symbol: 'circle',
        lineStyle: {
          normal: {
            width: 4,
            color: {
              type: 'linear',
              colorStops: [
                {
                  offset: 0,
                  color: '#A9F387', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#48D8BF', // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
            shadowColor: 'rgba(72,216,191, 0.3)',
            shadowBlur: 5,
            shadowOffsetY: 10,
          },
        },
        smooth: true,
        data: ydata,
        itemStyle: {
          color: function (params: any) {
            // 根据 category 字段返回不同的颜色
            var colorList: any = {
              1: '#ff0000',
              2: '#0000ff',
            };
            return colorList[params.data.type];
          },
        },
      },
    ],
  };
  isshow.value = true;
  batteryChart.setOption(option);
  // const res= await deviceVoltageWaveform()
};
</script>
<style lang="scss" scoped>
.title {
  position: absolute;
  top: 80px;
  left: 100px;
  font-size: 14px;

  > span::after {
    display: inline-block;
    content: '';
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-radius: 50%;
    background: #ff0000;
  }

  span {
    margin-right: 10px;
  }

  .lastspan::after {
    background: #0000ff;
  }
}
</style>
